<template>
  <view class="custom-select">
    <view class="select-input" @tap="toggleDropdown">
      <text v-if="modelValue" class="selected-text">{{ getSelectedText }}</text>
      <text v-else class="placeholder">{{ placeholder }}</text>
      <text class="arrow" :class="{ 'arrow-up': isOpen }">▼</text>
    </view>

    <view v-if="isOpen" class="select-dropdown">
      <view class="search-box">
        <input
          class="search-input"
          type="text"
          v-model="searchText"
          placeholder="搜索..."
          @input="onSearch"
        />
      </view>

      <scroll-view
        scroll-y
        class="options-scroll"
        @scrolltolower="onScrollToLower"
      >
        <view
          v-for="option in options"
          :key="option.value"
          class="option-item"
          @tap="selectOption(option)"
        >
          {{ option.text }}
        </view>
        <view v-if="loading" class="loading">加载中...</view>
      </scroll-view>

      <!-- 添加遮罩层用于关闭下拉框 -->
      <view class="mask" @tap.stop="closeDropdown"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  options: {
    type: Array as () => Array<{ text: string; value: string }>,
    default: () => []
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'search', 'scroll-to-lower'])

const isOpen = ref(false)
const searchText = ref('')

const getSelectedText = computed(() => {
  const selected = props.options.find(opt => opt.value === props.modelValue)
  return selected ? selected.text : ''
})

const toggleDropdown = () => {
  isOpen.value = !isOpen.value
  if (!isOpen.value) {
    searchText.value = ''
  }
}

const closeDropdown = () => {
  isOpen.value = false
  searchText.value = ''
}

const selectOption = (option: { text: string; value: string }) => {
  emit('update:modelValue', option.value)
  closeDropdown()
}

const onSearch = () => {
  emit('search', searchText.value)
}

const onScrollToLower = () => {
  emit('scroll-to-lower')
}
</script>

<style scoped>
.custom-select {
  position: relative;
  width: 100%;
  z-index: 100;
}

.select-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border: 2rpx solid #dcdfe6;
  border-radius: 8rpx;
  background-color: #fff;
}

.placeholder {
  color: #999;
}

.arrow {
  font-size: 24rpx;
  transition: transform 0.3s;
}

.arrow-up {
  transform: rotate(180deg);
}

.select-dropdown {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 1000;
}

.search-box {
  padding: 20rpx;
  border-bottom: 2rpx solid #dcdfe6;
}

.search-input {
  width: 100%;
  padding: 20rpx;
  border: 2rpx solid #dcdfe6;
  border-radius: 8rpx;
  box-sizing: border-box;
}

.options-scroll {
  max-height: 600rpx;
}

.option-item {
  padding: 30rpx 20rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.option-item:active {
  background-color: #f5f7fa;
}

.loading {
  text-align: center;
  padding: 20rpx;
  color: #999;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
}
</style>
